<!-- 表格自动滚动的组件 -->
<template>
    <!-- <el-table :row-style="tableRowStyle" class="custom-table" ref="tableRef" :data="tableData" border -->
    <el-table :style="{
        '--hover-background-color':dataProps.hoverBackgroundColor,'--color':dataProps.color,'--font-size':dataProps.fontSize
    }" :header-row-style="headerRowStyle" :row-style="tableRowStyle" header-row-class-name="table-header-row-class-name"  row-class-name="table-row-class-name" class="custom-table" ref="tableRef" :data="tableData" :border="false"
        style="width: 100%;height: 100%;">
        <template v-for="(itm, index) in tableFiled" :key="index">
            <el-table-column header-align="center" v-if="itm.prop == 'index'" type=index show-overflow-tooltip
                :label="itm.label" :width="itm.width ? itm.width : 'auto'" />
            <el-table-column header-align="center" v-else :prop="itm.prop" show-overflow-tooltip :label="itm.label"
                :width="itm.width ? itm.width : 'auto'" />
        </template>

    </el-table>
</template>

<script setup>

import { ref, onMounted, onUnmounted } from 'vue'
const tableFiled = ref([

])
const tableData = ref([])

const dataProps = defineProps({
    oddBackgroundColor:{
        type:String,
        default:'rgba(0,59,81, 1)'
    },
    evenBackgroundColor:{
        type:String,
        default:'rgba(10,39,50, 1)'
    },
    headerBackgroundColor:{
        type:String,
        default:'rgba(0,125,190, 1)'
    },
    hoverBackgroundColor:{
        type:String,
        default:'rgba(0,125,190, 1)'
    },
    color:{
        type:String,
        default:'rgba(255,255,255, 1)'
    },
    fontSize: {
        type:String,
        default:'20px'
    }
})

const emit = defineEmits(['emitGetDataEv'])
let timer = null;
let tableRef = ref(null);


const tableRowStyle = ({
    rowIndex,
}) => {

    if (rowIndex%2 == 0) {
        return { 'background-color': dataProps.evenBackgroundColor }
    } else {
        return { 'background-color': dataProps.oddBackgroundColor}
    }
    
}

const headerRowStyle = ()=>{
    return { 'background-color': dataProps.headerBackgroundColor }
}

const scroll = (t) => {
    let t_z = 5000
    if (t) {
        t_z = t
    }
    // 在执行新的计时器前将之前的计时器清除
    if (timer) clearInterval(timer);
    if (tableData.lenght == 0) {
        emit("dbRowBasicList", 5000)
        return
    }
    let status = true;
    // 获取表格滚动区域的dom
    const scrollDom = tableRef.value.$refs.bodyWrapper.getElementsByClassName("el-scrollbar__wrap")[0];
    // console.log(scrollDom)
    // 增加监听事件鼠标移入停止滚动
    scrollDom.addEventListener('mouseover', () => {
        status = false;
    });
    // 鼠标移出恢复滚动
    scrollDom.addEventListener('mouseout', () => {
        status = true;
    });

    // 设置每秒滚动一行
    timer = setInterval(() => {

        if (status) {
            // 设置每次滚动的像素
            scrollDom.scrollTop += 20;
            // 当滚动到底部时修改scrollTop回到顶部
            if ((scrollDom.scrollHeight - (scrollDom.clientHeight + scrollDom.scrollTop)) < 1) {
                scrollDom.scrollTop = 0;
                console.log('滚动完成')
            }
        }

    }, t_z);
}

const startTimerEv = () => {
    // 要在数据都加载渲染完成后去获取表格的滚动区域dom
    // setTimeout(() => { scroll(1000) }, 1000)
}

onMounted(() => {

})
onUnmounted(() => {
    // 组件卸载记得清除计时器
    if (timer) clearInterval(timer);
    timer = null;
})

defineExpose({
    tableData,
    tableFiled,
    startTimerEv
})

</script>

<style lang='less' scoped>


// 表身鼠标移上去背景颜色
@tr-table-row-hover-background-color:  var(--hover-background-color);
// 表格字体颜色
@tr-table-color:  var(--color);
@tr-table-font-size:  var(--font-size);

// @tr-title:  60px;
// @tr-top: 200px;

.el-table {
  background-color: transparent;
}

:deep(.table-row-class-name) {
    background-color: transparent;
}
:deep(.table-header-row-class-name .el-table__cell) {
    background-color: transparent !important;
}



:deep(.el-table tr) {
    background-color: transparent !important;
}


:deep(.el-table tr:hover) {
    background-color: transparent !important;
}




:deep(.el-table__cell) {
    background-color: transparent !important;
    color: @tr-table-color;
    font-size: @tr-table-font-size;
}


// 鼠标移动上去颜色
:deep(.el-table__row:hover) {
    background-color: @tr-table-row-hover-background-color !important;
}

</style>  